<template>
<div>
  <el-breadcrumb
    separator-class="el-icon-arrow-left"
    style="float:right;margin-right:20px;ub main-center cross-center"
  >
    <el-breadcrumb-item :to="{ path: '/' }">库房储备设置</el-breadcrumb-item>
    <el-breadcrumb-item>中心库房</el-breadcrumb-item>

    <el-breadcrumb-item>配送中心</el-breadcrumb-item>
  </el-breadcrumb>

   <!-- 查询信息的表单 -->
  <el-form ref="form" :model="form" >
      <el-input class="input" placeholder="商品名称" v-model="form.name" clearable></el-input>
      <el-button class="btn1" type="primary" @click="chaxun1">分页显示</el-button>
      <el-button class="btn3" type="primary" icon="el-icon-plus" @click="dialogFormVisible = true">增加</el-button>
      <!-- <el-button class="btn4" type="primary" icon="el-icon-edit"  disabled @click="dialogFormVisible1 = true">修改</el-button> -->
  </el-form>

   <!-- 增加库房储备设置 -->
    <el-dialog style="width:1200px;text-align:center;margin-top:-20px" title="增加库房储备设置" :visible.sync="dialogFormVisible">
  <el-form :model="form2" style="margin-top:10px;height:390px" ref="form2" :rules="rules">
    <el-form-item label="商品id" :label-width="formLabelWidth" prop="commodityId">
      <el-input class="input1" v-model="form2.commodityId" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item style="margin-top:10px;" label="商品当前储量" :label-width="formLabelWidth" prop="currentNumber">
      <el-input class="input1" v-model="form2.currentNumber" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item style="margin-top:10px;" label="商品最大储量" :label-width="formLabelWidth" prop="maximumCommodity">
      <el-input class="input1" v-model="form2.maximumCommodity" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item style="margin-top:10px;" label="库房名称" :label-width="formLabelWidth" prop="name">
      <el-input class="input1" v-model="form2.name" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item style="margin-top:10px;" label="缺货量" :label-width="formLabelWidth" prop="outOfStockNumber">
      <el-input class="input1" v-model="form2.outOfStockNumber" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item style="margin-top:10px;" label="商品名称" :label-width="formLabelWidth" prop="productName">
      <el-input class="input1" v-model="form2.productName" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item style="margin-top:10px;" label="库房id" :label-width="formLabelWidth" prop="warehouseId">
      <el-input class="input1" v-model="form2.warehouseId" autocomplete="off"></el-input>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button class="btn2" @click="dialogFormVisible = false">取 消</el-button>
    <el-button class="btn2" type="primary" @click="dialogFormVisible = false;add()">确 定</el-button>
  </div>
</el-dialog>

<!-- 修改库房储备设置 -->
    <el-dialog style="width:1200px;text-align:center;margin-top:-20px" title="修改库房储备设置" :visible.sync="dialogFormVisible1">
  <el-form :model="form4" ref="form4" :rules="rules1" style="margin-top:10px;height:390px">
    <el-form-item style="margin-top:10px;" label="商品id" :label-width="formLabelWidth" prop="commodityId">
      <el-input class="input1" v-model="form4.commodityId" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item style="margin-top:10px;" label="商品当前储量" :label-width="formLabelWidth" prop="currentNumber">
      <el-input class="input1" v-model="form4.currentNumber" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item style="margin-top:10px;" label="商品最大储量" :label-width="formLabelWidth" prop="maximumCommodity">
      <el-input class="input1" v-model="form4.maximumCommodity" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item style="margin-top:10px;" label="库房名称" :label-width="formLabelWidth" prop="name">
      <el-input class="input1" v-model="form4.name" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item style="margin-top:10px;" label="缺货量" :label-width="formLabelWidth" prop="outOfStockNumber">
      <el-input class="input1" v-model="form4.outOfStockNumber" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item style="margin-top:10px;" label="商品名称" :label-width="formLabelWidth" prop="productName">
      <el-input class="input1" v-model="form4.productName" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item style="margin-top:10px;" label="库房id" :label-width="formLabelWidth" prop="warehouseId">
      <el-input class="input1" v-model="form4.warehouseId" autocomplete="off"></el-input>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    
    <el-button class="btn2" @click="dialogFormVisible1 = false">取 消</el-button>
    <el-button class="btn2" type="primary" @click="dialogFormVisible1 = false;update('form4')">确 定</el-button>
  </div>
</el-dialog>

    <!-- 表格 -->
  <el-table
    v-loading="loading"
    ref="filterTable"
    :data="form3"
    style="width: 100%">
    <el-table-column
      type="selection"
      width="55">
    </el-table-column>
    <el-table-column
      prop="commodityId"
      label="商品id"
      sortable
      width="180"
      column-key="commodityId"
      :filters="[{text: '01', value: '01'}, {text: '02', value: '02'}, {text: '03', value:'03'}, {text: '04', value: '04'}, {text: '04', value: '04'}, {text: '04', value: '04'}, {text: '05', value: '05'}, {text: '06', value: '06'}]"
    >
    </el-table-column>
    <el-table-column
      prop="isSetting"
      label="是否设置过库房"
      width="180">
       <template slot-scope="scope">
        <!-- {{scope.row}} -->
        <el-switch v-model="scope.row.isSetting" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
        </template>
    </el-table-column>
    <el-table-column
      prop="productName"
      label="商品名称"
     >
    </el-table-column>
    <el-table-column label="操作">
      <template slot-scope="scope">
         <el-tooltip effect="dark" content="查看" placement="top" :enterable="false">
        <el-button icon="el-icon-edit" style="padding:10px;" type="primary" size="mini" @click="lookover(scope.row)">查看</el-button>
        </el-tooltip>
        <el-tooltip effect="dark" content="编辑" placement="top" :enterable="false">
        <el-button icon="el-icon-edit" style="padding:10px;" type="primary" size="mini" @click="dialogFormVisible1 = true">编辑</el-button>
        </el-tooltip>
         <!-- <el-tooltip effect="dark" style="padding:10px;" content="删除" placement="top" :enterable="false">
        <el-button
          disabled
          icon="el-icon-delete"
          size="mini"
          type="danger"
          @click="handleDelete(scope.$index, wareset)">删除</el-button>
         </el-tooltip> -->
      </template>
    </el-table-column>
  </el-table>

 <!-- 查看二级分类的表格信息 -->
 <el-dialog style="width:1200px;text-align:center;" title="库房" :visible.sync="dialogFormVisible2">
   <el-table
    ref="filterTable"
    v-loading = "loading"
    :data="warehouse"
    style="width: 100%">
       <el-table-column type="index"></el-table-column>
  <el-table-column
      prop="address"
      label="库房地址"
      width="100">
    </el-table-column>
    <el-table-column
      prop="createTime"
      label="创建时间"
      width="100">
    </el-table-column>
    <el-table-column
      prop="id"
      label="库房id"
      width="100">
    </el-table-column>
    <el-table-column
      prop="maximumWarehouse"
      label="库房最大储量"
      width="120">
    </el-table-column>
    <el-table-column
      prop="name"
      label="库房名称"
      width="100">
    </el-table-column>
    <el-table-column
      prop="updateTime"
      label="更新时间"
      width="100">
    </el-table-column>
    <!-- <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button
          icon="el-icon-edit"
          type="primary"
          size="mini"
          @click="handleEdit(scope.$index, scope.row)"
          >编辑</el-button>
          
        <el-button
          icon="el-icon-delete"
          size="mini"
          type="danger"
          @click="handleDelete(scope.$index, wareset)">删除</el-button>
      </template>
    </el-table-column> -->
  </el-table>
 </el-dialog>

 <!-- 分页效果 -->
  <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNum"
        :page-sizes="[4, 5, 6, 10]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>
</div>
</template>

<script>
export default {
  data() {
    return{
      total:0,
      pageSize:4,
      pageNum:1,
      queryInfo: {
        query: "",
        // type: 3,
        pageNum: 1,
        pageSize: 4,
      },
      loading:true,
      form:{
        name:''
      },
      form2:{
        commodityId:'',
        currentNumber:'',
        maximumCommodity:'',
        name:'',
        outOfStockNumber:'',
        productName:'',
        warehouseId:'',
        isSetting:''
      },
      form4:{
        commodityId:'',
        currentNumber:'',
        maximumCommodity:'',
        name:'',
        outOfStockNumber:'',
        productName:'',
        warehouseId:'',
      },
      form3:[],
      warehouse:[],
      formLabelWidth:'120px',
      dialogFormVisible:false,
      dialogFormVisible1:false,
      dialogFormVisible2:false,
      rules:{
          warehouseId: [
            { required: true, message: '请输入库房id', trigger: 'blur' },
            { min: 1, max: 5, message: '长度在 1 到 5 个字符', trigger: 'blur' }
          ],
          commodityId: [
            { required: true, message: '请输入商品id', trigger: 'blur' },
            { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
          ],
            currentNumber: [
            { required: true, message: '请输入商品当前储量', trigger: 'blur' },
            { min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' }
          ],
            maximumCommodity: [
            { required: true, message: '请输入商品最大储量', trigger: 'blur' },
            { min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' }
          ],
            name: [
            { required: true, message: '请输入库房名称,asd', trigger: 'blur' },
            { min: 3, max: 10, message: '长度在 3 到 10 个字符,asd', trigger: 'blur' }
          ],
            outOfStockNumber: [
            { required: true, message: '请输入缺货量', trigger: 'blur' },
            { min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' }
          ],
            productName: [
            { required: true, message: '请输入商品名称,aaa', trigger: 'blur' },
            { min: 3, max: 10, message: '长度在 3 到 10 个字符,aaa', trigger: 'blur' }
          ]        
      },
      rules1:{
           warehouseId: [
            { required: true, message: '请输入库房id', trigger: 'blur' },
            { min: 1, max: 5, message: '长度在 1 到 5 个字符', trigger: 'blur' }
          ],
           commodityId: [
            { required: true, message: '请输入商品id', trigger: 'blur' },
            { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
          ],
           currentNumber: [
            { required: true, message: '请输入商品当前储量', trigger: 'blur' },
            { min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' }
          ],
           maximumCommodity: [
            { required: true, message: '请输入商品最大储量', trigger: 'blur' },
            { min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' }
          ],
           name: [
            { required: true, message: '请输入库房名称,asd', trigger: 'blur' },
            { min: 3, max: 10, message: '长度在 3 到 10 个字符,asd', trigger: 'blur' }
          ],
           outOfStockNumber: [
            { required: true, message: '请输入缺货量', trigger: 'blur' },
            { min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' }
          ],
           productName: [
            { required: true, message: '请输入商品名称,aaa', trigger: 'blur' },
            { min: 3, max: 10, message: '长度在 3 到 10 个字符,aaa', trigger: 'blur' }
          ]        
      }
    }
  },
  methods:{
   async lookover(row) {
    
     await this.chaxun()
      this.dialogFormVisible2 = true
      console.log(row.warehouse)
      this.warehouse=[]
      this.warehouse.push(row.warehouse)
      // this.warehouse = []
      // this.warehouse = row.warehouse
    },
     handleSizeChange(newSize) {
      this.pageSize = newSize;
      this.chaxun();
    },
    /* 页面数发送改变的时候 */
    handleCurrentChange(newPage) {
      this.pageNum = newPage;
      this.chaxun();
    },
    //分页显示库房储备设置
    async chaxun() {
      this.loading = true
      const{data:res} = await this.$http.get('/api/send/getWarehouseSettingVo?pageNum='+this.pageNum+'&pageSize='+this.pageSize)
        if(res.code == 200){
        console.log("分页")
        console.log(res)
        let form3 = res.data
        this.total = res.total
        // let warehouse = res.data[0].warehouse
        // for(var i =0;i<res.data.length;i++){
        //   this.warehouse.push(res.data[i].warehouse)        
        // }
        // console.log(4)
        // console.log(this.warehouse)
        this.form3 = form3
        this.loading = false
        }else{
        return this.$message.error(res.msg)
      }
      
    },
     async chaxun1() {
      if(this.form.name == ""){
        return this.$message.error("查询条件不能为空")
      }else{
        this.loading = true
        const{data:res} = await this.$http.get('/api/send/getWarehouseSettingVo?pageNum='+this.pageNum+'&pageSize='+this.pageSize,{
        params:{
          'name':this.form.name
        }
      })
      if(res.code == 200){
        console.log("分页")
        console.log(res)
        let form3 = res.data
        this.warehouse.push(res.data[0].warehouse)
        this.form3 = form3
        // this.warehouse = warehouse
        console.log(this.warehouse)
        this.loading = false
      }else{
        return this.$message.error(res.msg)
      }
      }
      
      
    },
    //增加
    async add() {
      const{data:res} = await this.$http.post('/api/send/updateWarehouseSettingSaveOrUpdateVo',{
        commodityId:this.form2.commodityId,
        currentNumber:this.form2.currentNumber,
        maximumCommodity:this.form2.maximumCommodity,
        name:this.form2.name,
        outOfStockNumber:this.form2.outOfStockNumber,
        productName:this.form2.productName,
        warehouseId:this.form2.warehouseId
    })
      
       
    if(res.code == 200){
      console.log("新增")
      console.log(res)
      
      this.form3.push({
            commodityId:this.form2.commodityId,
            productName:this.form2.productName,
            isSetting:this.form2.isSetting
        })
        this.warehouse.push({  
        currentNumber:this.form2.currentNumber,
        maximumCommodity:this.form2.maximumCommodity,
        name:this.form2.name,
        outOfStockNumber:this.form2.outOfStockNumber,
        warehouseId:this.form2.warehouseId 
        })
        this.chaxun()
    }else{
      return this.$message.error(res.msg)
    }
    },
    //修改
    async update(forName) {
      const{data:res} =  await this.$http.post('/api/send/updateWarehouseSettingSaveOrUpdateVo',{
        commodityId:this.form4.commodityId,
        currentNumber:this.form4.currentNumber,
        maximumCommodity:this.form4.maximumCommodity,
        name:this.warehouse.name,
        outOfStockNumber:this.form4.outOfStockNumber,
        productName:this.form4.productName,
        warehouseId:this.form4.warehouseId
    })
     
    if(res.code == 200){
      console.log("新增")
      console.log(res)
      this.$set(this.form3,this.form4.index,{
          commodityId:this.form4.commodityId,
          // currentNumber:this.form4.currentNumber,
          // maximumCommodity:this.form4.maximumCommodity,
          // name:this.form4.name,
          // outOfStockNumber:this.form4.outOfStockNumber,
          productName:this.form4.productName,
          // warehouseId:this.form4.warehouseId
        }) 
        console.log(forName)
      this.chaxun()
    }else{
      return this.$message.error(res.msg)
    }
    },
     handleEdit(index, rows) {
        this.updateSupplier()
        console.log(index, rows);
      },
      handleDelete(index, rows) {
        console.log(index, rows);
        rows.splice(index,1);
      }
  },
  created() {
    this.chaxun()
  }
};
</script>

<style scoped>
*{
  margin: 0px auto;
  padding: 0px;
}
.input{
  width: 150px;
  margin-top: 20px;
  margin-left: 10px;
  margin-bottom: 10px;
}
.btn1{
  /* width: 140px; */
  height: 40px;
  margin-left: 10px;
  margin-right: 10px;
  text-align: center;
  padding: 10px;
  background-color: rgb(32, 178, 170);
}
.btn4{
  /* width: 140px; */
  /* height: 30px;
  margin-top: -10px; */
  margin-left: 10px;
  margin-right: 10px;
  text-align: center;
  padding: 10px;
  background-color: rgb(19, 206, 212);
}
.btn3{
  /* width: 140px; */
  /* height: 30px; */
  margin-left: 10px;
  margin-right: 10px;
  text-align: center;
  padding: 10px;
  background-color: rgb(24, 144, 255);
}
.btn2{
  text-align: center;
  width: 120px;
  height: 40px;
  padding: 10px;
  margin-left: 150px;
}
.input1{
  margin-top: 10px;
  width: 400px;
}
</style>